import {useEffect, useState} from 'react';
// @ts-ignore
import * as echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/line';
import 'echarts/lib/chart/bar';
import 'echarts/lib/component/toolbox';
import 'echarts/lib/component/legendPlain';
import 'echarts/lib/component/grid';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/markLine';
import 'echarts/lib/component/markPoint';
import {queryMonthPayAndIncomeData} from "@/pages/Analyse/service";


const MonthlyChart = (props: {month:string}) => {

  // 图表数据源
  const [data, setData] = useState<{
    xData: number[], yData1: number[], yData2: number[]
  }>()
  useEffect(() => {
    queryMonthPayAndIncomeData({month: props.month}).then((res)=>{
      if(res.status === "done"){
        setData({
          xData: res.data?.xData,
          yData1: res.data?.yData1,
          yData2: res.data?.yData2,
        })
      }
    })
  }, [props.month]);

  console.log(props.month)
  // 图表参数
  let [main, setMain] = useState("")
  const option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          crossStyle: {
            color: '#999'
          }
        }
      },
      legend: {},
      toolbox: {
        feature: {
          dataView: { show: true, readOnly: false },
          // magicType: { show: true, type: ['line', 'bar'] },
          // restore: { show: true },
          saveAsImage: { show: true }
        }
      },
      xAxis: [
        {
          type: 'category',
          // boundaryGap: false,    // 设置为false，可能会导致Y轴坐标被覆盖
          data: data?.xData,
          axisPointer: {
            type: 'shadow'
          }
        }
      ],
      yAxis: [
        {
          type: 'value',
          name: '元',
          // min: 0,
          // // max: 250,
          // // interval: 50,
          axisLabel: {
            formatter: '{value} 元'
          }
        },
      ],
      series: [
        {
          name: '支出',
          type: 'line',
          data: data?.yData1,
          color: "#28a745",
          smooth: true,   // 平滑折线
          lineStyle: {
            color: '#28a745',     // 线条颜色
            width: 5              // 线条粗细
          },
          // label: {
          //   show:true,
          //   position: "top"
          // },
          markPoint: {
            data: [
              { type: 'max', name: '支出' },
            ]
          },
          tooltip: {
            valueFormatter: function (value: number) {
              return value + '元';
            }
          },
        },
        {
          name: '收入',
          type: 'line',
          color: "#dc3545",
          data: data?.yData2,
          markPoint: {
            data: [
              { type: 'max', name: '支出' },
            ]
          },
          // label: {
          //   show:true,
          //   position: "top"
          // },
          tooltip: {
            valueFormatter: function (value: number) {
              return value + '元';
            }
          },
        },
      ]
  }
  useEffect(() => {
    let node = document.getElementById("monthly_chart_1")
    // @ts-ignore
    setMain(node)
  }, [main]);
  if (main !== ""){
    const myChar = echarts.init(main);
    myChar.setOption(option)
  }
  return (
    <div style={{width: `100%`, height: 300}} id={"monthly_chart_1"}></div>
  )
}
export default MonthlyChart;
